<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="60%" append-to-body custom-class="import-dialog">
      <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
          <!-- <el-form-item label="楼盘编号" prop="estateId">
            <el-input
              v-model="queryParams.estateId"
              placeholder="请输入楼盘编号"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> -->
          <el-form-item label="楼盘名称" prop="estateName">
            <el-input v-model="queryParams.estateName" placeholder="请输入名称" clearable style="width: 240px"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="地区" prop="region">
            <el-cascader ref="areaPicker" v-model="queryParams.region" :props="areaProps" :show-all-levels="true"
              @change="handleChangeArea"></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" ref="table">
          <!-- <el-table-column label="楼盘编号" align="center" prop="estateId" /> -->
          <el-table-column label="楼盘名称" align="center" prop="estateName" />
          <el-table-column label="地区" align="center" prop="buildingNumber">
            <template slot-scope="scope">
              {{ scope.row.provinceName }}
              {{ scope.row.cityName }}
              {{ scope.row.districtName }}
              {{ scope.row.streetName }}
              {{ scope.row.communityName }}
            </template>
          </el-table-column>
          <el-table-column label="楼栋" align="center" prop="buildingNumber"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="primary" @click="selectHandle(scope.row)"
                v-if="selectState(scope.row.estateId)">已选择</el-button>
              <el-button @click="selectHandle(scope.row)" v-else>选择</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listArea } from "@/api/system/config";
import { listEstate } from "@/api/house/estate";
export default {
  props: {
    title: {
      default: "选择楼盘",
    },
    value: {
      default: false,
    },
    selectedList:{
      default:[]
    }
  },
  dicts: ["dict_unsubscribe_rule_type"],
  data() {
    return {
      areaProps: {
        lazy: true,
        // emitPath: false,
        lazyLoad(node, resolve) {
          const { level } = node;
          if (level < 3) {
            listArea({ level: node.level + 1, parentId: node.value }).then(
              (res) => {
                const areas = res.data.map((value, i) => ({
                  value: value.id,
                  label: value.name,
                  leaf: level >= 2,
                }));
                resolve(areas);
              }
            );
          } else {
            resolve([]);
          }
        },
        checkStrictly: true,
      },
      visible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        estateId: undefined,
        apartmentType: undefined,
        editStatus: undefined,
        apartmentState: undefined,
        updateBy: undefined,
        communityId: undefined,
        estateName: '',
        region: [],
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
      //选择列表
      selectList: [],
    };
  },
  computed: {
    selectState: {
      get() {
        return (estateId) => {
          let id = this.selectList.find(item => item.estateId == estateId)
          if (id) {
            return true
          }
          return false
        }
      },
      set(v) {
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init();
      }
      this.visible = newVal; // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit("input", val); // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
  },
  methods: {
    init() {
      this.reset()
      this.getList();
    },
    reset() {
      this.selectList = JSON.parse(JSON.stringify(this.selectedList))
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        estateId: undefined,
        apartmentType: undefined,
        editStatus: undefined,
        apartmentState: undefined,
        updateBy: undefined,
        communityId: undefined,
        estateName: '',
        region: [],
      }
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      // this.dateRange = [];
      this.queryParams.provinceId = "";
      this.queryParams.cityId = "";
      this.queryParams.districtId = "";
      this.queryParams.streetId = "";
      this.queryParams.communityId = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询房间列表 */
    getList() {
      this.loading = true;
      listEstate(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSelectionChange() { },
    // 选择楼盘
    selectHandle(row) {
      let index = this.selectList.findIndex(item => item.estateId == row.estateId)
      if (index > -1) {
        this.selectList.splice(index, 1)
      } else {
        this.selectList.push(row)
      }
    },
    handleChangeArea(val) {
      const checkedNode = this.$refs["areaPicker"].panel.getNodeByValue(val);
      const ids = checkedNode.path;
      this.queryParams.provinceId = ids[0];
      this.queryParams.cityId = ids[1];
      this.queryParams.districtId = ids[2];
      this.queryParams.streetId = ids[3];
      this.queryParams.communityId = ids[4];
    },
    submitForm() {
      let list = JSON.parse(JSON.stringify(this.selectList))
      this.$emit('success', list)
      this.reset();
      this.visible = false
    },
    cancel() {
      this.reset();
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog.scss";
</style>
